<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart height="254" :data="data" :forceFit="true" :padding="['auto', 'auto', '40', '50']">
      <v-tooltip />
      <v-axis />
      <v-bar position="x*y" />
    </v-chart>
  </div>
</template>

<script>
export default {
    name: 'Bar',
    props: {
        title: {
            type: String,
            default: ''
        },
        data: {
            type: Array,
            default: () => {
                return []
            }
        },
        scale: {
            type: Array,
            default: () => {
                return [
                    {
                        dataKey: 'x',
                        min: 2
                    },
                    {
                        dataKey: 'y',
                        title: '时间',
                        min: 1,
                        max: 22
                    }
                ]
            }
        },
        tooltip: {
            type: Array,
            default: () => {
                return [
                    'x*y',
                    (x, y) => ({
                        name: x,
                        value: y
                    })
                ]
            }
        }
    },
    data() {
        return {}
    }
}
</script>
